<template>
	<view class="elder-container">
		<!-- <view class="u-page"> -->
		<view class="elders">
			<!-- 搜索区域 -->
			<view class="search">
				<u-search v-model="searchKey" placeholder="请输入姓名或者地址等信息" searchIconColor="#007aff" :show-action="false"
					@search="searchElder()">
				</u-search>
				<uni-icons size="35" color="#007aff" type="camera" class="camera" @click="scanCode"></uni-icons>
			</view>
			<!-- 老人列表 -->
			<view style="margin: 10px">
				<uni-list>
					<uni-list-item showArrow title="杨运英" rightText="查看设备" clickable @click="toDeviceList" />
					<uni-list-item showArrow v-for="elder in elderList" :key="elder.id" :title="elder.name"
						rightText="未绑定设备" clickable @click="toDeviceList(elder.id)" />
					<!-- 					<uni-list-item showArrow title="老人2" rightText="查看设备" clickable @click="onClick" />
					<uni-list-item showArrow title="老人3" rightText="查看设备" clickable @click="onClick" />
					<uni-list-item showArrow title="老人4" rightText="查看设备" clickable @click="onClick" />
					<uni-list-item showArrow title="老人5" rightText="查看设备" clickable @click="onClick" /> -->
				</uni-list>
			</view>
		</view>
		<!-- 		<button class="add" type="primary" @click="bindPillBox()">
			<uni-icons size="20" color="#ffffff" type="plusempty" name="add"></uni-icons>
			<text>绑定设备</text>
		</button> -->
	</view>
</template>

<script>
	import {
		getElderList
	} from "../api/elder.js";
	export default {
		data() {
			return {
				searchKey: "",
				elderList: [],
				pageNum: 1,
				pageSize: 14,
				param: '',
				total: 0,
			};
		},
		methods: {
			// 获取老人列表
			async getElders() {
				let res = await getElderList(this.pageNum, this.pageSize, this.param);
				// console.log(res);
				this.total = res.total;
				this.elderList = [...this.elderList, ...res.rows]
			},

			// 扫码
			scanCode() {
				uni.scanCode({
					success: (res) => {
						console.log("点击了 扫码");
						console.log(res.scanType, res.result)
					},
					fail: () => {
						console.log("扫码失败")
					}
				})

			},

			// 搜索
			searchElder() {
				this.param = this.searchKey;
				this.elderList = [];
				this.getElders()

			},

			// 跳转到设备列表
			toDeviceList(id) {
				uni.navigateTo({
					url: '/pages/homepage/ElderDeviceList/index'
				})
			},
			// 跳转到药盒页面
			async toPillBox() {
				uni.navigateTo({
					url: '/pages/homepage/PillBox/index?uuid=2c773654facb11ec97eafa163eb546d6'
				})
			},
			// 跳转到绑定设备页面
			bindPillBox() {
				uni.navigateTo({
					url: '/pages/homepage/PillBox/BindPillBox/index',
					// success: res => {},
					// fail: () => {},
					// complete: () => {}
				});
			},
			//
			onClick() {
				this.$modal.showToast("暂无设备");
			},

		},

		//
		onLoad() {
			this.getElders();
		},

		// 触底继续加载数据
		onReachBottom() {
			if (this.pageNum * this.pageSize >= this.total) {
				// 超出总条数，停止加载
				uni.showToast({
					title: '已经显示全部信息',
					icon: 'none',
					duration: 2000
				});
			} else {
				// 未超出总条数，继续加载
				uni.showToast({
					title: '正在加载更多数据...',
					icon: 'none',
					duration: 1500
				});
				this.pageNum += 1;
				console.log("正在加载第", this.pageNum, "页")
				this.getElders();
			}
		}
	};
</script>

<style scoped>
	.elders {
		margin: 10px;
	}

	.search {
		/* margin: 10px 2px 0; */
		margin: 10px;
		display: flex;
		justify-content: center;
	}

	.camera {
		margin-left: 20px;
		margin-right: 10px;
	}

	.add {
		position: fixed;
		bottom: 50px;
		left: 225rpx;
		width: 300rpx;
		/* border-radius: 50%; */
	}

	/* 	page,.elder-container {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		background-color: #fff;
		min-height: 100%;
		height: auto;
	} */

	.elder-container {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		background-color: #fff;
		min-height: 100vh;
		height: auto;
	}
</style>